<!-- 开始节点配置 -->
<template>
  <el-form
    class="learun-form-config"
    label-width="88px"
    label-position="left"
    size="mini"
  >
    <el-form-item :label="$t('节点标识')">
      <el-input v-model="node.id" readonly></el-input>
    </el-form-item>

    <el-form-item :label="$t('通知策略')">
      <l-checkbox
        :disabled="disabled"
        v-model="node.messageType"
        :options="[
          { value: '1', label: this.$t('短信') },
          { value: '2', label: this.$t('邮箱') },
          { value: '3', label: this.$t('微信') },
          { value: '4', label: this.$t('站内消息') },
        ]"
      >
      </l-checkbox>
    </el-form-item>

    <el-form-item :label="$t('流程模版')">
      <l-select :disabled="disabled" v-model="node.wfschemeId" :options="list">
      </l-select>
    </el-form-item>
    <el-form-item :label="$t('流程版本')">
      <l-select
        :disabled="disabled"
        v-model="node.wfVersionId"
        :options="verisons"
      >
      </l-select>
    </el-form-item>
    <el-divider>{{ $t("子流程发起设置") }}</el-divider>
    <el-form-item :label="$t('自动发起')">
      <el-switch :disabled="disabled" v-model="node.isAuto"> </el-switch>
    </el-form-item>
    <template v-if="!node.isAuto">
      <el-button-group style="padding:0 0 8px" v-if="!disabled">
        <el-button size="mini" @click="handlePostClick()">{{
          $t("岗位")
        }}</el-button>
        <el-button size="mini" @click="handleRoleClick()">{{
          $t("角色")
        }}</el-button>
        <el-button size="mini" @click="handleUserClick()">{{
          $t("用户")
        }}</el-button>
        <el-button size="mini" @click="handleLevelClick()">{{
          $t("上下级")
        }}</el-button>
        <el-button size="mini" @click="handleNodeAuditorClick()">{{
          $t("节点执行人")
        }}</el-button>
        <el-button size="mini" @click="handleAuditorSqlClick()">{{
          $t("表字段")
        }}</el-button>
      </el-button-group>
      <l-table
        height="notset"
        :isShowNum="false"
        :columns="userColumns"
        :dataSource="node.auditUsers"
      >
        <template v-slot:type="scope">
          {{ typeFormat(scope.row.type) }}
        </template>
        <template v-slot:condition="scope">
          <l-select
            :disabled="disabled"
            size="mini"
            v-if="scope.row.type == '2'"
            :options="conditionOptions"
            v-model="scope.row.condition"
          ></l-select>
        </template>
        <l-table-btns
          v-if="!disabled"
          :isFixed="false"
          :btns="tableBtns"
          @click="handleTableBtnClick"
        ></l-table-btns>
      </l-table>
    </template>
    <el-divider>{{ $t("子流程发起脚本") }}</el-divider>
    <div style="text-align: center;margin-bottom:16px;">
      <el-radio-group
        v-model="node.executeType"
        size="mini"
        :disabled="disabled"
      >
        <el-radio-button label="1">{{ $t("执行SQL") }}</el-radio-button>
        <el-radio-button label="2">{{ $t(".NET方法") }}</el-radio-button>
        <el-radio-button label="3">{{ $t("第三方接口") }}</el-radio-button>
      </el-radio-group>
    </div>
    <template v-if="node.executeType == '1'">
      <div style="padding:0 0 16px 0;">
        <el-alert
          :title="$t('sql参数说明')"
          type="info"
          :description="
            $t(
              '参数有 @processId流程进程主键 @childProcessId 子流程进程主键  @code上一步执行码 @userId流程发起人Id @userAccount流程发起人账号 @companyId流程发起人公司 @departmentId流程发起人部门;@userId2上一步审核人Id @userAccount2上一步审核人账号 @companyId2上一步审核人公司 @departmentId2上一步审核人部门;'
            )
          "
          show-icon
          :closable="false"
        >
        </el-alert>
      </div>
      <el-form-item label-width="0">
        <el-select
          v-model="node.sqlDb"
          :placeholder="$t('请选择执行SQL数据库')"
          :disabled="disabled"
        >
          <el-option-group
            v-for="group in lr_dblinkTree"
            :key="group.id"
            :label="group.label"
          >
            <el-option
              v-for="item in group.children"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            >
            </el-option>
          </el-option-group>
        </el-select>
      </el-form-item>
      <el-form-item label-width="0">
        <el-input
          :readonly="disabled"
          type="textarea"
          v-model="node.sqlStr"
          rows="8"
          :placeholder="$t('请填写SQL语句')"
        ></el-input>
      </el-form-item>
      <el-form-item label-width="0">
        <el-input
          :readonly="disabled"
          type="textarea"
          v-model="node.sqlStrRevoke"
          rows="8"
          :placeholder="$t('请填写SQL语句（撤销）')"
        ></el-input>
      </el-form-item>
    </template>
    <template v-if="node.executeType == '2'">
      <div style="padding:0 0 16px 0;">
        <el-alert
          :title="$t('IOC说明')"
          type="info"
          :description="$t('注意：编写一个继承IWorkFlowMethod的类')"
          show-icon
          :closable="false"
        >
        </el-alert>
      </div>
      <el-form-item label-width="0">
        <el-input
          :readonly="disabled"
          type="textarea"
          v-model="node.ioc"
          rows="4"
          :placeholder="$t('ioc名称')"
        ></el-input>
      </el-form-item>
      <el-form-item label-width="0">
        <el-input
          :readonly="disabled"
          type="textarea"
          v-model="node.iocRevoke"
          rows="4"
          :placeholder="$t('ioc名称（撤销）')"
        ></el-input>
      </el-form-item>
    </template>
    <template v-if="node.executeType == '3'">
      <div style="padding:0 0 16px 0;">
        <el-alert
          :title="$t('接口参数说明')"
          type="info"
          :description="
            $t(
              '注意：配置支持Post方法的接口,json数据格式。{processId:流程发起实例主键,childProcessId 子流程进程主键,userId:流程发起人Id,userAccount:流程发起人账号,companyId:流程发起人公司,departmentId:流程发起人部门,code:上一步执行码,userId2:上一步审核人Id,userAccount2:上一步审核人账号,companyId2:上一步审核人公司,departmentId2:上一步审核人部门}'
            )
          "
          show-icon
          :closable="false"
        >
        </el-alert>
      </div>
      <el-form-item label-width="0">
        <el-input
          :readonly="disabled"
          type="textarea"
          v-model="node.apiUrl"
          rows="4"
          :placeholder="$t('接口地址')"
        ></el-input>
      </el-form-item>
      <el-form-item label-width="0">
        <el-input
          :readonly="disabled"
          type="textarea"
          v-model="node.apiUrlRevoke"
          rows="4"
          :placeholder="$t('接口地址（撤销）')"
        ></el-input>
      </el-form-item>
    </template>

    <l-dialog
      :title="$t('添加岗位')"
      :visible.sync="selectPostVisible"
      :height="480"
      width="1024px"
      @ok="handlePostSelectOk"
      @closed="handlePostSelectClosed"
    >
      <l-post-select-panel ref="postSelectPanel"></l-post-select-panel>
    </l-dialog>

    <l-dialog
      :title="$t('添加角色')"
      :visible.sync="selectRoleVisible"
      :height="480"
      width="800px"
      @ok="handleRoleSelectOk"
      @closed="handleRoleSelectClosed"
    >
      <l-role-select-panel ref="roleSelectPanel"></l-role-select-panel>
    </l-dialog>

    <l-dialog
      :title="$t('添加用户')"
      :visible.sync="selectUserVisible"
      :height="480"
      width="1024px"
      @ok="handleUserSelectOk"
      @closed="handleUserSelectClosed"
    >
      <l-user-select-panel ref="userSelectPanel"></l-user-select-panel>
    </l-dialog>

    <!--上下级选择-->
    <l-dialog
      :title="$t('上下级选择')"
      :visible.sync="levelVisible"
      :height="200"
      width="500px"
      @ok="handleLevelOk"
      @closed="handleLevelClosed"
    >
      <auditor-level-form ref="auditorLevelForm"></auditor-level-form>
    </l-dialog>

    <!--流程节点选择-->
    <l-dialog
      :title="$t('流程节点选择')"
      :visible.sync="nodeAuditorVisible"
      :height="200"
      width="500px"
      @ok="handleNodeAuditorOk"
      @closed="handleNodeAuditorClosed"
      @opened="handleNodeAuditorOpened"
    >
      <node-auditor-form ref="nodeAuditorForm"></node-auditor-form>
    </l-dialog>

    <!--数据表字段选择-->
    <l-dialog
      :title="$t('数据表字段选择')"
      :visible.sync="auditorSqlVisible"
      width="500px"
      :height="300"
      @ok="handleAuditorSqlOk"
      @closed="handleAuditorSqlClosed"
    >
      <auditor-sql-form ref="auditorSqlForm"></auditor-sql-form>
    </l-dialog>
  </el-form>
</template>

<script>
const api = window.$api.workflow.scheme;
import auditorLevelForm from "./auditorLevel";
import nodeAuditorForm from "./auditorNode";
import auditorSqlForm from "./auditorSql";
export default {
  name: "subprocess-option",
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    auditorLevelForm,
    nodeAuditorForm,
    auditorSqlForm,
  },
  data() {
    return {
      selectPostVisible: false,
      selectRoleVisible: false,
      selectUserVisible: false,
      levelVisible: false,
      nodeAuditorVisible: false,
      auditorSqlVisible: false,

      tableBtns: [{ prop: "Delete", label: "删除" }],

      userColumns: [
        { label: "类型", prop: "type", width: "64" },
        { label: "名称", prop: "name", minWidth: "100" },
        { label: "附加条件", prop: "condition", minWidth: "100" },
      ],

      conditionOptions: [
        { value: "1", label: this.$t("同一个部门") },
        { value: "2", label: this.$t("同一个公司") },
        { value: "3", label: this.$t("发起人上级") },
        { value: "4", label: this.$t("发起人下级") },
      ],
    };
  },
  asyncComputed: {
    list: {
      async get() {
        const data = await this.$awaitWraper(api.getList());
        const res = data || [];
        return res
          .filter((t) => t.f_Id != this.wfdesign.schemeinfoId)
          .map((t) => {
            return { label: t.f_Name, value: t.f_Id };
          });
      },
    },
    verisons: {
      async get() {
        let res = [];
        if (!this.$validatenull(this.node.wfschemeId)) {
          res = await this.$awaitWraper(
            api.getHistoryList(this.node.wfschemeId)
          );
        }
        return (res || []).map((t) => {
          return { label: this.lr_dateFormat(t.f_CreateDate), value: t.f_Id };
        });
      },
    },
  },
  computed: {
    node() {
      return this.wfdesign.currentWfNode;
    },
  },
  inject: ["wfdesign"],
  methods: {
    addTableData(selectData) {
      this.node.auditUsers = this.node.auditUsers || [];
      let addData = selectData.filter(
        (t) =>
          this.node.auditUsers.findIndex(
            (t2) => t2.id == t.id && t2.type == t.type
          ) == -1
      );
      this.node.auditUsers = this.node.auditUsers.concat(addData);
    },

    // 岗位 添加
    handlePostClick() {
      this.selectPostVisible = true;
    },
    handlePostSelectClosed() {
      this.$refs.postSelectPanel.resetForm();
    },
    async handlePostSelectOk() {
      let postList = await this.$refs.postSelectPanel.getForm();
      let selectData = postList.map((t) => {
        return { type: "1", id: t.f_PostId, name: t.name };
      });
      this.addTableData(selectData);
      this.selectPostVisible = false;
    },

    // 角色 添加
    handleRoleClick() {
      this.selectRoleVisible = true;
    },
    handleRoleSelectClosed() {
      this.$refs.roleSelectPanel.resetForm();
    },
    async handleRoleSelectOk() {
      let select = await this.$refs.roleSelectPanel.getForm();
      let selectData = select.map((t) => {
        return { type: "2", id: t.f_RoleId, name: t.f_FullName, condition: "" };
      });
      this.addTableData(selectData);
      this.selectRoleVisible = false;
    },

    // 账号添加
    handleUserClick() {
      this.selectUserVisible = true;
    },
    handleUserSelectClosed() {
      this.$refs.userSelectPanel.resetForm();
    },
    async handleUserSelectOk() {
      let select = await this.$refs.userSelectPanel.getForm();
      let selectData = select.map((t) => {
        return { type: "3", id: t.f_UserId, name: t.name };
      });
      this.addTableData(selectData);
      this.selectUserVisible = false;
    },

    // 上下添加
    handleLevelClick() {
      this.levelVisible = true;
    },
    handleLevelClosed() {
      this.$refs.auditorLevelForm.resetForm();
    },
    handleLevelOk() {
      this.$refs.auditorLevelForm.validateForm(() => {
        let data = this.$refs.auditorLevelForm.getForm();
        this.addTableData([data]);
        this.levelVisible = false;
      });
    },

    // 流程节点
    handleNodeAuditorClick() {
      this.nodeAuditorVisible = true;
    },
    handleNodeAuditorOk() {
      this.$refs.nodeAuditorForm.validateForm(() => {
        let data = this.$refs.nodeAuditorForm.getForm();
        this.addTableData([data]);
        this.nodeAuditorVisible = false;
      });
    },
    handleNodeAuditorClosed() {
      this.$refs.nodeAuditorForm.resetForm();
    },
    handleNodeAuditorOpened() {
      let wfdata = this.wfdesign.handleGetWFData();
      this.$refs.nodeAuditorForm.setForm(
        wfdata.filter((t) => (t.type = "userTask" && t.id != this.node.id))
      );
    },

    // 数据表字段
    handleAuditorSqlClick() {
      this.auditorSqlVisible = true;
    },
    handleAuditorSqlOk() {
      this.$refs.auditorSqlForm.validateForm(() => {
        let data = this.$refs.auditorSqlForm.getForm();
        data.name = `${data.table}【${data.auditorField}】`;
        this.addTableData([data]);
        this.auditorSqlVisible = false;
      });
    },
    handleAuditorSqlClosed() {
      this.$refs.auditorSqlForm.resetForm();
    },

    typeFormat(type) {
      switch (type) {
        case "1":
          return this.$t("岗位");
        case "2":
          return this.$t("角色");
        case "3":
          return this.$t("用户");
        case "4":
          return this.$t("上下级");
        case "5":
          return this.$t("节点");
        case "6":
          return this.$t("表字段");
      }
    },

    handleTableBtnClick(btn) {
      this.node.auditUsers.splice(btn.rowIndex, 1);
    },
  },
};
</script>

<style></style>
